<template>
  <div class="room-content">
    <Navbar :appTitle="appTitle" />
    <Search ref="topSearch" style='padding-top:0.1rem' class="search" placeholder="商品名称|商品编号|规格" :isScreen="true" :isType="true" @onSearch="onSearch"
      @onScreen="onScreen">
    </Search>
    <!--分页列表 -->
    <div class="listBox" :style="{ height: GLOBAL.currentEnvironment ? 'calc(100vh - 0.5rem)' : 'calc(100vh - 1rem)'}">
      <pageList ref="pageList" :checkedShow="false" :columns="columns" :listUrl="listUrl" @handleList="handleList" @operationItem='operationItem'>
        <div slot="body" slot-scope="{ item }">
          <div class="rt-column">
            <div class="rt-row">
              <div class="column">
                <span class="column-t">最近使用日期：</span>
                <span class="column-c"
                  >{{ item.recentlyUseTime || '--' }}</span
                >
              </div>
              <div class="column">
                <span class="column-t">净需求量：</span>
                <span class="column-c" style="color:#ff4d4f">{{ item.netRequirementNumText || '--' }}</span>
              </div>
            </div>
          </div>
        </div>
      </pageList>
    </div>
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
export default {
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
  },
  data() {
    return {
      itemInfo: {},
      listUrl: "/planmgt/erpProductMaterialRequirement/list", //列表接口
      columns: {
        titleKey: "goodsName", //标题
        labelKey: ["goodsCode", "spec"], //标签
        operation: [
          //操作
          {
            name: "提交采购任务",
            icon: require("@/assets/actionIcon/tjcgrw.png"),
          },
          {
            name: "需求明细",
            icon: require("@/assets/actionIcon/xqmx.png"),
          },
        ],
      },
      keyword: "",
      dropdownObj: {},
      appTitle: "",
    };
  },
  computed: {},
  created() {
    this.appTitle = this.$route.query.navTitle;
  },
  mounted() {
    this.searchQuery();
  },
  methods: {
    operationItem(item, type) {
      if (type == "提交采购任务") {
        this.$router.push({
          path: '/submitPurchaseTask',
          query: { goodsId: item.goodsId },
        })
      }
      if (type == "需求明细") {
        this.$router.push({
          path: '/requirementDetails',
          query: { goodsId: item.goodsId },
        })
      }
    },
    onSearch(v) {
      this.keyword = v;
      this.searchQuery();
    },
    onScreen() {
      // this.appTitle = "更多筛选";
      // this.keyword = this.$refs.topSearch.value;
      // let pramsObj = JSON.parse(JSON.stringify(this.dropdownObj));
      // pramsObj.keyword = this.keyword;
      // this.$refs.SearchTag.showModal(this.keyword, pramsObj);
    },
    getCategory(sureObj) {
      this.appTitle = this.$route.query.navTitle;
      this.keyword = sureObj.keyword;
      this.$refs.topSearch.value = sureObj.keyword;
      this.dropdownObj = JSON.parse(JSON.stringify(sureObj));
      delete this.dropdownObj.keyword;
      this.searchQuery();
    },
    //列表点击更多按钮事件
    handleList(id, item, type) {
      if (type == "列表") {
        console.log(item);
        this.$router.push({
          path: "/workshopDemandDetail",
          query: {
            goodsId: item.goodsId,
          },
        });
      }
    },
    // 搜索
    searchQuery() {
      let params = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.$refs.pageList.searchQuery(params);
    },
  },
};
</script>
<style lang="scss" scoped>
.room-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.labelBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0.14rem;
  .labelLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    margin-right: 0.05rem;
    font-size: 0.11rem;
  }
  .labelRight {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    font-size: 0.11rem;
  }
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
.dialogContentBox {
  text-align: left;
  margin: 0.1rem 0.19rem;
  color: #191f25;
  font-size: 0.16rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}
.operateBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.07rem;
  font-size: 0.14rem;
  font-weight: 500;
  color: #1890ff;
}
.rt-column {
  padding: 0.17rem 0 0 0.17rem;
  .arrow {
    color: #1890ff;
    // float: right;
    // margin-right: -0.05rem;
    // display: block;
    position: absolute;
    right: 0.15rem;
  }
  //  border: 1px solid red;
}
.rt-row {
  margin-bottom: 0.1rem;
  .column {
    width: 100%;
    .column-t {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-bottom: 0.03rem;
    }
    .column-c {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
    }
  }
}
</style>